<template>
  <div class="scrcletop">
    <!-- 搜索框 开始-->
    <div class="search">
      <input type="search" placeholder="请输入商家名或品类" />
      <img src="../assets/magnifier.png" />
    </div>
    <!-- 搜索框 结束-->
    <!-- 下拉菜单 开始 -->
    <div class="select">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" @change="changeDevelop"/>
        <van-dropdown-item v-model="value2" :options="option2" />
        <van-dropdown-item v-model="value3" :options="option3" />
      </van-dropdown-menu>
    </div>
    <!-- 下拉菜单 结束 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      value1: 1,
      value2: 0,
      value3: 0,
      option1: [
        { text: "游泳", value: 0 },
        { text: "商品", value: 1 },
      ],
      option2: [
        { text: "综合", value: 0 },
        { text: "价格降序", value: 1 },
        { text: "价格升序", value: 2 },
      ],
      option3: [
        { text: "销量", value: 0 },
      ],
    };
  },
  methods:{
    changeDevelop(){
      if(this.value1==0){
        this.$router.push('/Circle');
      }
    }
  }
};
</script>
<style>
/* 搜索 */
.scrcletop{
  width: 100%;
  height: 123px;
  position: fixed;
  top: 0;
  background-color: #fff;
  z-index: 99;
}
.scrcletop .search {
  width: 100%;
  margin: 0 auto;
  margin-top: 8%;
  height: 35px;
  position: relative;
}
.scrcletop .search > input {
  width: 8.5rem;
  height: 35px;
  border: 0;
  outline: none;
  border-radius: 35px;
  background-color: #efefef;
  padding: 0 10px 0 40px;
}
.scrcletop .search > img {
  width: 28px;
  position: absolute;
  top: 5px;
  left: 10%;
}
/* 下拉菜单 */
.scrcletop .select{
  margin-top: 10px;
}
</style>